/**
 * 向腾讯发送请求，获取实时数据
 */
var data;
var other;
function getData(){
    $.ajax({
        url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
        dataType: 'jsonp',
        success: function (result) {
            data = JSON.parse(result.data);
            center1();
            center2();
            right1();
            right2();
        }
    });
    
    $.ajax({
        url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_other',
        dataType: 'jsonp',
        success: function (result) {
            other = JSON.parse(result.data);
            left1();
            left2();
        }
    });
}
getData();

function center1() {
    document.getElementById('confirm').innerText = data.chinaTotal.confirm;
    document.getElementById('heal').innerText = data.chinaTotal.heal;
    document.getElementById('dead').innerText = data.chinaTotal.dead;
    document.getElementById('nowConfirm').innerText = data.chinaTotal.nowConfirm;
    document.getElementById('noInfect').innerText = data.chinaTotal.noInfect;
    document.getElementById('importedCase').innerText = data.chinaTotal.importedCase;
}

function center2() {
    var center2Chart = echarts.init(document.getElementById('center2'));

    var option = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: { // 左侧小导航图标
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8,
                color: 'white',
            },
            splitList: [{
                    start: 1,
                    end: 9
                },
                {
                    start: 10,
                    end: 99
                },
                {
                    start: 100,
                    end: 999
                },
                {
                    start: 1000,
                    end: 9999
                },
                {
                    start: 10000
                }
            ],
            color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
        },
        series: [{
            name: '累计确诊人数',
            type: 'map',
            mapType: 'china',
            roam: false, // 禁用拖动和缩放
            itemStyle: { // 图形样式
                normal: {
                    borderWidth: .5, //区域边框宽度
                    borderColor: '#69414b', //区域边框颜色
                    areaColor: '#ffefd5', //区域颜色
                },
                emphasis: { // 鼠标滑过地图高亮的相关设置
                    borderWidth: .5,
                    borderColor: '#69414b',
                    areaColor: '#fff',
                }
            },
            label: { // 图形上的文本标签
                normal: {
                    show: true, //省份名称
                    fontSize: 8,
                },
                emphasis: {
                    show: true,
                    fontSize: 8,
                }
            },
            data: [] // [{'name': '上海', 'value': 318}, {'name': '云南', 'value': 162}]
        }]
    };

    var provinces = data.areaTree[0].children;
    for (var province of provinces) {
        option.series[0].data.push({
            'name': province.name,
            'value': province.total.confirm
        });
    }

    center2Chart.setOption(option);
}

function left1() {
    var left1Chart = echarts.init(document.getElementById('left1'));

    var option = {
        title: {
            text: '',
            textStyle: {
                color: 'white',
            },
            left: 'left',
        },
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#7171C6'
                }
            },
        },
        //图例
        legend: {
            data: ['累计确诊', '累计治愈', '累计死亡'],
            left: 'right',
            textStyle: {
                color: 'white'
            }
        },
        //图形位置
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'white'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            //y轴字体设置
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
            //y轴线设置显示
            axisLine: {
                show: true
            },
            //与x轴平行的线样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#17273B',
                    width: 1,
                    type: 'solid',
                }
            }
        }],
        series: [{
            name: '累计确诊',
            type: 'line',
            smooth: true,
            data: [] // [20, 406, 529]
        }, {
            name: '累计治愈',
            type: 'line',
            smooth: true,
            data: [] // [25, 75, 122]
        }, {
            name: '累计死亡',
            type: 'line',
            smooth: true,
            data: [] // [6, 15, 47]
        }]
    };

    var chinaDayList = other.chinaDayList;
    for (var day of chinaDayList) {
        option.xAxis[0].data.push(day.date);
        option.series[0].data.push(day.confirm);
        option.series[1].data.push(day.heal);
        option.series[2].data.push(day.dead);
    }

    left1Chart.setOption(option);

}

function left2() {
    var left2Chart = echarts.init(document.getElementById('left2'));

    var option = {
        title: {
            text: '',
            textStyle: {
                color: 'white',
            },
            left: 'left',
        },
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: '#7171C6'
                }
            },
        },
        //图例
        legend: {
            data: ['新增确诊', '新增疑似'],
            left: 'right',
            textStyle: {
                    color: 'white'
                },
        },
        //图形位置
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'white'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            //y轴字体设置
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
            //y轴线设置显示
            axisLine: {
                show: true
            },
            //与x轴平行的线样式
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#17273B',
                    width: 1,
                    type: 'solid',
                }
            }
        }],
        series: [{
            name: '新增确诊',
            type: 'line',
            smooth: true,
            data: [] // [20, 406, 529]
        }, {
            name: '新增疑似',
            type: 'line',
            smooth: true,
            data: [] // [25, 75, 122]
        }]
    };

    var chinaDayAddList = other.chinaDayAddList;
    for (var day of chinaDayAddList) {
        option.xAxis[0].data.push(day.date);
        option.series[0].data.push(day.confirm);
        option.series[1].data.push(day.suspect);
    }

    left2Chart.setOption(option);


}

function right1() {
    var right1Chart = echarts.init(document.getElementById('right1'));

    var option = {
        title: {
            text: '',
            subtext: '全国确诊省市TOP10',
            textStyle: {
                color: 'white',
            },
            left: 'center'
        },
        color: ['#3398DB'],
        tooltip: {
            trigger: 'axis',
            //指示器
            axisPointer: {
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#ffffff'
                }
            }
        },
        axisLabel: {
            interval: 0,
            formatter:function(value){
                     return value.split("").join("\n");}
            },
        yAxis: {
            type: 'value',
            //y轴字体设置
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        value = value / 1000 + 'k';
                    }
                    return value;
                }
            },
        },
        series: [{
            data: [], // [582, 300, 100]
            type: 'bar',
            barMaxWidth: '50%'
        }]
    };

    var provinces = data.areaTree[0].children;
    var topData = [];
    for (var province of provinces) {
        topData.push({
            'name': province.name,
            'value': province.total.confirm
        });
    }

    // 降序排列
    topData.sort(function (a, b) {
        return b.value - a.value;
    });
    // 只保留前10条
    topData.length = 10;
    // 分别取出省份名称和数据
    for (var province of topData) {
        option.xAxis.data.push(province.name);
        option.series[0].data.push(province.value);
    }

    right1Chart.setOption(option);
}

function right2() {
    var right2Chart = echarts.init(document.getElementById('right2'));

    var option = {
        title: {
            subtext: '境外输入省市TOP5',
            text: '',
            textStyle: {
                color: 'white',
            },
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [],
            textStyle: {
                color: 'white',
            }, 
        },
        series: [{
            name: '省市名称',
            type: 'pie',
            radius: '45%',
            center: ['50%', '60%'],
            data: [],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };

    var provinces = data.areaTree[0].children;
    var topData = [];
    for (var province of provinces) {
        if (province.children[0].name == '境外输入') {
            topData.push({
                'name': province.name,
                'value': province.children[0].total.confirm
            });
        }
    }
    // 降序排列
    topData.sort(function (a, b) {
        return b.value - a.value;
    });
    // 只保留前5条
    topData.length = 5;
    // 分别取出省份名称和数据
    for (var province of topData) {
        option.legend.data.push(province.name);
        option.series[0].data.push(province);
    }

    right2Chart.setOption(option);
}

// 每5分钟自动获取数据
setInterval(getData,5*60*1000);



/**
 * 实时显示时间
 */
var slidint;
    function newTimer() {
      stopit();
      var today;
      today = new Date();
      var str = today.toLocaleDateString();
      str += "  " + week();
      str += "  " + today.toLocaleTimeString();
      var o = document.getElementById("DateTime");
      o.innerHTML = str;
      slidint = setTimeout(newTimer, 1000);
    }
      
    function stopit() {
      clearTimeout(slidint);
    }
      
    function week() {
      var d, day, x, s = " ";
      var x = new Array("星期日", "星期一", "星期二");
      var x = x.concat("星期三", "星期四", "星期五");
      var x = x.concat("星期六");
      d = new Date();
      day = d.getDay();
      return (s += x[day]);
    }
      
    window.onload = function() {
      newTimer();
    }

// 检查数字，如果是个位数，则补0
function check(num) {
    return num < 10 ? '0' + num :  num;
}

console.log("完成时间：2020.4.14");
console.log("来源：太阁IT前端学员");
console.log("师承：太阁IT学院 - 汤小洋");
